<template>
  <section class="EmployeesIndex-container">
    <employees-search ref="search" @onSearch="doSearch">
      <quick-card-list :items="employeess">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog"
            />
          </quick-action-bar>
        </template>

        <template slot-scope="scope">
          <employeess-card :item="scope.item" :noAction="false">
            <div class="action-bar" slot-scope="scope">
              <quick-action-bar>
                <quick-icon-button
                  icon="icon-xiugai"
                  tooltip="编辑"
                  @click="showEditDialog(scope.item)"
                />
                <quick-icon-button
                  icon="icon-shanchu"
                  tooltip="删除"
                  @click="deleteemployees(scope.item.id)"
                />
              </quick-action-bar>
            </div>
          </employeess-card>
        </template>
      </quick-card-list>
      <!-- <employees-list :employeess="employeess">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog"
            />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-xiugai"
              tooltip="编辑"
              @click="showEditDialog(scope.row)"
            />
            <quick-icon-button
              icon="icon-shanchu"
              tooltip="删除"
              @click="deleteemployees(scope.row.id)"
            />
            <quick-icon-button
              icon="icon-xiangqing-copy"
              tooltip="详情"
              @click="detailemployees(scope.row.id)"
            />
          </quick-action-bar>
        </template>
      </employees-list> -->
    </employees-search>

    <employees-add ref="addDialog" @added="refresh" />
    <employees-edit ref="editDialog" @edited="refresh" />
  </section>
</template>

<script>
import EmployeesSearch from "./EmployeesSearch.vue";
import EmployeesList from "./EmployeesList";
import EmployeesAdd from "./EmployeesAdd.vue";
import EmployeesEdit from "./EmployeesEdit.vue";
import EmployeessCard from "./EmployeesCard.vue";
import _api from "../../common/api/employee.js";

export default {
  components: {
    EmployeessCard,
    EmployeesSearch,
    EmployeesList,
    EmployeesAdd,
    EmployeesEdit,
  },
  data() {
    return {
      employeess: [],
    };
  },
  methods: {
    doSearch(employeess) {
      this.employeess = employeess;
    },

    showAddDialog() {
      this.$refs.addDialog.showDialog();
    },

    showEditDialog(employees) {
      this.$refs.editDialog.showDialog(employees);
    },

    deleteemployees(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(parseInt(id));
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // detailemployees(id) {
    //   const { href } = this.$router.resolve({
    //     path: "/employeesdetail",
    //     query: {
    //       id: id,
    //     },
    //   });
    //   window.open(href, "_blank");
    // },

    refresh() {
      this.$refs.search.getEmployees();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.EmployeesIndex-container {
  height: 100%;
  .action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
  }
}
</style>